<template>
  <div>
    <lan-header :config="headerConfig"></lan-header>
    <lan-search-form
      size="small"
      :config="searchForm"
      :formData="searchFormData"
      @search="search"
    ></lan-search-form>
    <lan-dialog
      :config="addConfig"
      :formData="addFormData"
    >
      <template #slot="scope">
        <el-input
          v-model="scope.data.slot"
          class="form-input"
        ></el-input>
      </template>
    </lan-dialog>
  </div>
</template>

<script>
import lanSearchForm from '../../../components/lanSearchForm';
import lanHeader from '../../../components/lanHeader';
import lanDialog from '../../../components/lanDialog';

import { createAreaApi } from '../../../api/area';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteAreaApi, getAreaListApi } from '../../../api/area';
import { parseError } from '../../../utils';

export default {
  components: {
    lanHeader,
    lanSearchForm,
    lanDialog
  },
  props: {
    searchFormData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      headerConfig: {
        title: '区域列表',
        buttons: [
          {
            text: '新建',
            icon: 'add',
            type: 'primary',
            size: 'small',
            method: () => {
              this.addConfig.dialogVisible = true;
            }
          }
        ]
      },

      searchForm: {
        inline: true,
        size: 'small',
        formList: [
          {
            name: 'name',
            type: 'input',
            placeholder: '区域名称'
          }
        ]
      },
      addConfig: {
        labelWidth: 200,
        dialogVisible: false,
        title: '新建区域',
        type: 'add',
        inline: false,
        formList: [
          {
            name: 'name',
            label: '区域名称',
            type: 'input',
            placeholder: '请输入区域名称',
            required: true,
            tooltip: '区域是指用来管理工厂的，一般按照地域来划分 (湖北区、浙江区)',
            width: 300
          }
        ],
        buttons: [
          {
            text: '取消',
            icon: '',
            type: '',
            method: () => {
              this.addConfig.dialogVisible = false;
            }
          },
          {
            text: '确认',
            icon: '',
            type: 'primary',
            method: () => {
              this.add();
              this.addConfig.dialogVisible = false;
            }
          }
        ]
      },
      addFormData: {
        name: ''
      }
    };
  },
  methods: {
    search() {
      this.$emit('search');
    },
    add() {
      createAreaApi(this.addFormData.name)
        .then(res => {
          Message.success('添加成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => {
          this.search();
        });
    }
  }
};
</script>

<style>
</style>
